<template>
    <div id="account-number">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="common-bread">
            <el-breadcrumb-item>账号管理</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="contentBox">
            <div class="select">
                <label class="label">账号类型：</label>
                <el-select v-model="type">
                    <el-option label='全部' value='0'></el-option>
                    <el-option label='管理员' value='1'></el-option>
                    <el-option label='校方' value='2'></el-option>
                    <el-option label='教师' value='3'></el-option>
                </el-select>
                <label class="label">省市：</label>
                <el-select v-model="cityId" @change="getZones()">
                    <el-option :label='item.areaName' :value='item.areaId' v-for="item in cities" :key="item.areaId">
                    </el-option>
                </el-select>
                <label class="label">区县：</label>
                <el-select v-model="zoneId">
                    <el-option :label='item.areaName' :value='item.areaId' v-for="item in zones" :key="item.areaId">
                    </el-option>
                </el-select>
                <div class="mt10">
                    <label class="label">账号：</label>
                    <el-input placeholder="输入手机号" v-model="phone" class="keyword"></el-input>
                    <el-button type="primary" @click="getList(1)">搜索</el-button>
                    <el-button type="primary" @click="newAccount()" class="fr" icon="el-icon-circle-plus-outline">新建账号
                    </el-button>
                </div>
            </div>

            <div class="list">
                <el-table :data="list">
                    <el-table-column type="index" label="序号">
                    </el-table-column>
                    <el-table-column prop="userName" label="账号名称">
                    </el-table-column>
                    <el-table-column prop="jobTitle" label="称呼">
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号">
                    </el-table-column>
                    <el-table-column prop="userType" label="类型">
                    </el-table-column>
                    <el-table-column prop="zone" label="地区">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <i class="el-icon-document blueIcon" @click="accountDet(scope.row)" title="查看详情"></i>
                            <i class="el-icon-edit blueIcon" @click="newAccount(scope.row)" title="编辑"
                                v-if="scope.row.userType !='超级管理员'"></i>
                            <i class="el-icon-delete redIcon" @click="deleteAccount(scope.row)" title="删除"
                                v-if="scope.row.userType !='超级管理员'"></i>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination v-show="this.totalCount > 10" layout="total, prev, pager, next, jumper"
                        :page-size="10" :current-page="currentPage" :total="totalCount"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                type: "0",
                cityId: "00000000",
                zoneId: "00000000",
                cities: [],
                zones: [{
                    areaId: "00000000",
                    areaName: "全部"
                }],
                phone: "",
                list: [],
                totalCount: 0,
                currentPage: 1
            }
        },
        computed: mapState({ user: state => state.user }),
        mounted() {
            this.getCities().then(() => {
                let accountInfo = JSON.parse(this.$util.getStore("accountInfo"));
                let accountSelect = this.$util.getStore("accountSelect");
                if (accountInfo && accountSelect == 1) {
                    //存在搜索历史
                    this.currentPage = accountInfo.pageNum;
                    this.type = accountInfo.userType ? accountInfo.userType : "0";
                    if (accountInfo.areaId == "00000000") {
                        this.cityId = "00000000";
                        this.zoneId = "00000000";
                    } else if (accountInfo.areaId.substring(2, 8) == "000000") {
                        this.cityId = accountInfo.areaId;
                        this.zoneId = "00000000";
                    } else {
                        this.cityId = accountInfo.areaId.substring(0, 2) + "000000";
                        this.getZones(accountInfo.zoneId);
                    }

                    this.phone = accountInfo.phone;

                    this.getList(this.currentPage);
                } else {
                    this.getList(this.currentPage);
                }

                this.$util.removeStore("accountInfo");
                this.$util.removeStore("accountSelect");
            });
        },
        methods: {
            //获取城市列表
            getCities() {
                return new Promise(reslove => {
                    this.$util.getCities().then(cities => {
                        this.cities = cities;
                        this.cities.unshift({
                            areaId: "00000000",
                            areaName: "全部"
                        });
                    })

                    reslove();
                })
            },
            //获取区县列表
            getZones(zoneId = "00000000") {
                this.$util.getZones(this.cityId).then(zones => {
                    this.zones = this.cityId == "00000000" ? [] : zones;
                    this.zones.unshift({
                        areaId: "00000000",
                        areaName: "全部"
                    });
                    this.zoneId = zoneId + "";
                })
            },
            //获取账号列表
            getList(pageNum) {
                if (pageNum != this.currentPage) this.currentPage = pageNum;
                let areaId = this.zoneId == "00000000" ? this.cityId : this.zoneId;
                let params = {
                    userType: this.type,
                    areaId: areaId,
                    pageSize: 10,
                    pageNum: pageNum
                }

                let userType = new Map([
                    [0, "超级管理员"], [1, "管理员"], [2, "校方"], [3, "教师"]
                ])

                if (this.type == 0) delete params.userType;
                if (this.phone) params.phone = this.phone;
                this.$util.setStore("accountInfo", params);

                this.$axios.get("/adminapi/v1/tools/user/list", {
                    params: params
                }).then(response => {
                    if (response.data.error == 10000) {
                        this.list = [];
                        this.totalCount = 0;
                        if (!response.data.data) return;
                        let list = response.data.data.content;
                        this.totalCount = response.data.data.total * 1;

                        list.forEach(item => {
                            item.userType = userType.get(item.userType);
                            if (item.areaModelList) {
                                item.zone = "";
                                item.areaModelList.forEach(op => {
                                    item.zone += op.areaName;
                                })
                            }
                            this.list.push(item);
                        });
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                })
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getList(val);
            },
            deleteAccount(row) {
                this.$confirm(`您确定要删除账号 “${row.userName}” ？`, "温馨提示", this.$util.confirmBtnText).then(() => {
                    this.$axios.post("/adminapi/v1/tools/user/delete?userId=" + row.userId).then(response => {
                        if (response.data.error == 10000) {
                            this.getList(this.currentPage);
                            this.$util.successMsg("删除成功");
                        } else {
                            this.$util.errorMsg(response.data.message);
                        }
                    })
                }).catch(() => { })
            },
            accountDet(row) {
                this.saveSelectHistory();
                this.$router.push('/accountDet?id=' + row.userId);
            },
            newAccount(row) {
                this.saveSelectHistory();
                if (!row) return this.$router.push('/newAccount');
                this.$router.push('/newAccount?id=' + row.userId);
            },
            saveSelectHistory() {
                let areaId = this.zoneId == "00000000" ? this.cityId : this.zoneId;
                let params = {
                    userType: this.type,
                    areaId: areaId,
                    pageSize: 10,
                    pageNum: this.currentPage
                }

                if (this.type == 0) delete params.userType;
                if (this.phone) params.phone = this.phone;
                this.$util.setStore("accountInfo", params);
            }
        }
    }
</script>
<style scoped>
</style>